<template>
    <div class='allProject'>
        <div class='content'>
            <table>
                <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>项目封面</th>
                        <th>发行商</th>
                        <th>单份价格</th>
                        <th>筹集资金</th>
                        <th>剩余份数/总份数</th>
                        <th>融资进度</th>
                        <th>权益发放</th>
                    </tr> 
                </thead>

                <tbody>
                    <tr class="sep-row">
                    <td colspan="5"></td>
                    </tr>
                    <tr class="tr-th">
                        <td colspan="10">
                            <div class='thead'>
                                <div>
                                    <span>创建时间：<b>2018-09-07 14:34:57</b></span>
                                    <span>项目编号：<b>GR18060714345</b></span>
                                </div>
                                <div class='selectOperation'>
                                    <div>
                                        <span @click='goAdopt'>通过</span>
                                        <span @click='refuse'>拒绝</span>
                                    </div>
                                    <div>
                                        <el-button @click='openExamine' type="primary">审核记录</el-button>
                                    </div>
                                    
                                </div>
                            </div>
                        </td>
                    </tr>  
                    <tr>
                        <td>
                            <div>
                               <p>中国合伙人2</p>     
                               <p>
                                    <a @click='openDetails()' href="javascript:;">查看详情</a>
                                    <!-- <a href="javascript:;">编辑</a> -->
                               </p>
                                
                            </div>
                        </td>

                        <td>
                            <div class='information'>
                                <div>
                                    <img   src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=8d92cdd953df8db1a32e7a643922dddb/0ff41bd5ad6eddc4802878ba34dbb6fd536633a0.jpg" alt="">
                                </div>        
                            </div>
                        </td>
                        <td class='receipt'>
                            <h3>聚力影视投资有限公司</h3>
                            <p>系统后台添加</p>
                        </td>
                        <td>
                            <h3>5000元<b>(每人限购10份)</b></h3>
                            <a @click='openHistoricalPrice' href='javascript:;'>历史价格</a>
                        </td>
                        <td>
                            <h3>10，000，000元</h3>
                            <p>剩余:100，000元</p>
                        </td>
                        <td>
                           <h3>2000份/<b>10000份</b></h3>
                           <a @click='purchase' href='javascript:;'>购买记录</a>
                        </td>
                        <td>
                            <h3>进行中</h3>
                            <a @click='openChangeRange' href='javascript:;'>更改记录</a>
                        </td>
                        <td>
                            <a href="javascript:;" @click='openInterests(item)'>权益发放</a>   
                        </td>
                    </tr> 
                </tbody>
            </table>
        </div>
        
        <!-- 历史价格 -->
        <priceList ref='priceList'></priceList>
        <!-- 购买记录 -->
        <purchase ref='purchase'></purchase>

        <!-- 融资更改记录 -->
        <changeRange ref='changeRange'></changeRange>

        <!-- 审核记录 -->
        <examine ref='examine'></examine>

        <!-- 发放权益 -->
        <interests ref="interests"></interests>

        <el-dialog
            :visible.sync="aportDialogVisible"
            width="20%">
            <span>确认通过审核吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="sure()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog
            :visible.sync="refuseDialogVisible"
            width="20%">
            <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入拒绝原因"
                v-model="textarea3">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelrefuse()">取 消</el-button>
                <el-button type="primary" @click="surerefuse()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>


<script>
import priceList from '../../../projectOverflew/components/priceList';
import purchase from '../../../projectOverflew/components/purchase';
import changeRange from '../../../projectOverflew/components/changeRange';
import examine from '../../../projectOverflew/components/examine';
import interests from '../../../projectOverflew/components/interests';
export default {
    name:'allProject',
    data(){
        return {
            aportDialogVisible:false,
            refuseDialogVisible:false,
            options:[{
                label:'123',
                value:'123'
            }]
        }
    },
    methods:{
        addProject(){
            this.$router.push({name:'addProjectIndex'});
        },
        //详情
        openDetails(){
            this.$router.push({name:'details'});
        },

        //历史价格
        openHistoricalPrice(){
            this.$refs.priceList.openPrice();
        },
        //购买价格
        purchase(){
            this.$refs.purchase.openPurchaseStatus();
        },

        //更改记录
        openChangeRange(){
            this.$refs.changeRange.openChangeRange();
        },

        //审核记录
        openExamine(){
            this.$refs.examine.openPrice();
        },
        //发放权益
        openInterests(item){
            this.$refs.interests.opendialogVisible(item);
        },
        //通过
        goAdopt(){
            this.aportDialogVisible = true;
        },
        cancel(){
            this.aportDialogVisible = false;
        },
        sure(){
            this.aportDialogVisible = false;
        },

        //拒绝
        refuse(){
            this.refuseDialogVisible = true;
        },
        cancelrefuse(){
            this.refuseDialogVisible = false;
        },

        surerefuse(){
            this.refuseDialogVisible = false;
        }

        


    },
    components:{
        purchase,
        priceList,
        changeRange,
        examine,
        interests
    }
}
</script>


<style lang="less" scoped>
.allProject{
    // .title{
    //     display: flex;
    //     width: 100%;
    //     div:first-child{
    //         margin-right: 1rem;
    //     }
    //     .search{
    //         display: flex;
    //         div:first-child{
    //             display: flex;
    //         }
    //         .input{
    //             margin:0 .4rem 0 .3rem;
    //         }
    //     }
    // }
    table {
        width: 100%;
        border-collapse: collapse;
        thead {
            th{
                /* height: 32px;
                line-height: 32px; */
                text-align: left;
                background: #f8f8f8;
                color: #666;
                font-weight: 400;
                padding: 1rem;
            }
            th:first-child {
                width: 10%;
            }
            th:nth-child(2) {
                width: 8%;
            }
            th:nth-child(3) {
                width: 21%;
            }
            
        }
        tbody{
            .information{
                div{
                    width: 90px;
                    height: 133px;
                    margin: 0 auto;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            tr:nth-child(2),tr:nth-child(3){
                td{
                    padding: 1rem;
                    border: 1px solid #e6e6e6;
                }
            }

            tr:nth-child(3){
                td:first-child{
                    p:last-child{
                        margin: 0;
                        display: inline-block;
                        color: #36aaf5;
                        text-decoration: underline;
                    }
                    p{
                        margin: 0.8rem 0 .3rem 0;
                    }
                }
                .receipt{
                    ul{
                        line-height: 1.8rem;
                    }
                    h3{
                        font-weight: 400;
                        color: rgba(16, 16, 16, 1);
                        font-size: 17px;
                        margin: 0;
                    }
                    p{
                        color: rgba(170, 170, 170, 1);
                        font-size: 15px;
                        margin: .3rem 0 0 0;
                    }
                }
                td:nth-child(4){
                    h3{
                        font-weight: 400;
                        color: rgba(255, 18, 104, 1);
                        font-size: 17px;
                        margin: 0 0 .3rem 0;
                        b{
                            color: #aaa;
                            font-weight: 400;
                        }
                    }

                    a{
                        color: rgba(4, 146, 251, 1);
                        font-size: 17px;
                        text-decoration: underline;
                    }
                }
                td:nth-child(5){
                    h3{
                        font-weight: 400;
                        color: rgba(255, 18, 104, 1);
                        font-size: 17px;
                        margin: 0 0 .3rem 0;
                    }
                    p{
                        font-size: 17px;
                        color: #aaa;
                        margin: 0;
                    }
                }
                td:nth-child(6){
                    h3{
                        font-weight: 400;
                        color: #aaa;
                        font-size: 17px;
                        margin: 0 0 .3rem 0;
                        b{
                            color:rgba(255, 18, 104, 1);
                            font-weight: 400;
                        }
                    }

                    a{
                        color: rgba(4, 146, 251, 1);
                        font-size: 17px;
                        text-decoration: underline;
                    }
                }

                td:nth-child(7){
                    h3{
                        font-weight: 400;
                        color: #101010;
                        font-size: 17px;
                        margin: 0 0 0.3rem 0;
                    }
                    a{
                        color: #0492fb;
                        font-size: 17px;
                        text-decoration: underline;
                    }
                }
                td{
                    a{
                        color: #0492fb;
                        font-size: 17px;
                        text-decoration: underline;
                    }
                }
            }
        
            .sep-row {
                height: 20px;
            }
            .thead{
                display: flex;
                justify-content: space-between;
                div {
                    line-height: 36px;
                    font-size: 14px;
                    display: flex;
                    div:first-child{
                        margin-right: 2rem;
                    }
                }
                span {
                    color: #36aaf5;
                }
                span:last-child {
                    margin-left: 2rem;
                }
                b {
                    font-weight: 400;
                    color: #7d7d7d;
                }
            }
            .selectOperation {
                /* width: 7rem; */
                cursor: pointer;
            }
        }

    }

    

}
</style>
